<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员充值</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" />
    <style>
        .main-container {
            padding: 15px 15px 15px 75px;
            background: #f2f2f2;
            min-height: 100vh;
        }
        .search-box {
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .recharge-box {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
        }
        .member-info {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .member-info-item {
            margin-bottom: 10px;
        }
        .member-info-label {
            color: #666;
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/admin_leftmenu.html'; ?>
    
    <div class="main-container">
        <!-- 搜索区域 -->
        <div class="search-box">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">会员卡号</label>
                            <div class="layui-input-block">
                                <input type="text" name="card_no" placeholder="请输入会员卡号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <button class="layui-btn" lay-submit lay-filter="searchMember">查找会员</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 充值区域 -->
        <div class="recharge-box">
            <!-- 会员信息 -->
            <div class="member-info">
                <div class="member-info-item">
                    <span class="member-info-label">会员卡号：</span>
                    <span id="memberCardNo">-</span>
                </div>
                <div class="member-info-item">
                    <span class="member-info-label">会员姓名：</span>
                    <span id="memberName">-</span>
                </div>
                <div class="member-info-item">
                    <span class="member-info-label">会员等级：</span>
                    <span id="memberLevel">-</span>
                </div>
                <div class="member-info-item">
                    <span class="member-info-label">当前余额：</span>
                    <span id="memberBalance">-</span>
                </div>
            </div>

            <!-- 充值表单 -->
            <form class="layui-form" lay-filter="rechargeForm">
                <input type="hidden" name="member_id">
                <div class="layui-form-item">
                    <label class="layui-form-label">充值金额</label>
                    <div class="layui-input-block">
                        <input type="number" name="amount" required lay-verify="required|number" placeholder="请输入充值金额" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">赠送金额</label>
                    <div class="layui-input-block">
                        <input type="number" name="gift_amount" value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">支付方式</label>
                    <div class="layui-input-block">
                        <select name="payment_method" required lay-verify="required">
                            <option value="">请选择支付方式</option>
                            <option value="cash">现金</option>
                            <option value="wechat">微信</option>
                            <option value="alipay">支付宝</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注说明</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注说明" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="recharge">确定充值</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,$ = layui.$;
        
        // 查找会员
        form.on('submit(searchMember)', function(data){
            $.ajax({
                url: '/app/ky_shouyin/admin/member/info'
                ,type: 'GET'
                ,data: {card_no: data.field.card_no}
                ,success: function(res){
                    if(res.code === 0) {
                        var member = res.data;
                        $('#memberCardNo').text(member.card_no);
                        $('#memberName').text(member.name);
                        $('#memberLevel').text(member.level_name);
                        $('#memberBalance').text('￥' + member.balance);
                        $('input[name="member_id"]').val(member.id);
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
        
        // 充值提交
        form.on('submit(recharge)', function(data){
            if(!data.field.member_id) {
                layer.msg('请先查找会员');
                return false;
            }
            
            $.ajax({
                url: '/app/ky_shouyin/admin/member/doRecharge'
                ,type: 'POST'
                ,data: data.field
                ,success: function(res){
                    if(res.code === 0) {
                        layer.msg('充值成功', {
                            icon: 1,
                            time: 1000
                        }, function(){
                            // 刷新会员信息
                            $.ajax({
                                url: '/app/ky_shouyin/admin/member/info'
                                ,type: 'GET'
                                ,data: {id: data.field.member_id}
                                ,success: function(res){
                                    if(res.code === 0) {
                                        var member = res.data;
                                        $('#memberBalance').text('￥' + member.balance);
                                    }
                                }
                            });
                            // 重置表单
                            $('form[lay-filter="rechargeForm"]')[0].reset();
                            form.render();
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
    </script>
</body>
</html> 